<template>
  <div class="current-year">
    <div
      class="current-year-text"
      :style="{ color, fontSize: fontSize + 'px' }"
      :data-text="currentYear"
    ></div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue'
  const props = {
    showYear: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      // default: 'rgba(231, 192, 201,.3)'
      default: 'rgba(255,0,0,.4)'
    },
    fontSize: {
      type: [String, Number],
      default: 24
    },
    title: {
      type: [String],
      default: new Date().getFullYear() + ' 沐歌'
    }
  }
  export default defineComponent({
    name: 'CurrentYear',
    props,
    setup(props) {
      const currentYear = ref('')
      onMounted(() => {
        currentYear.value = props.showYear ? props.title : ''
      })
      return { currentYear }
    }
  })
</script>

<style lang="scss" scoped>
  .current-year {
    border-radius: 5px;
    position: relative;
    white-space: nowrap;
    font-weight: 600;

    .current-year-text {
      flex: 0 0 100%;
      font-weight: 1900;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url(../../assets/img/source.gif);
      background-clip: text;
      -webkit-background-clip: text;

      &::after {
        content: attr(data-text);
        -webkit-text-stroke: 0.8px #fffbee;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -49%);
        background: url(../../assets/img/source.gif);
        background-clip: text;
        -webkit-background-clip: text;
        background-size: 100% 100%;
      }
    }
  }
</style>
